import { Terminal } from 'xterm'
require('xterm/css/xterm.css')
import { FitAddon } from 'xterm-addon-fit'
require('../css/style.css')

const terminal = document.getElementById('terminal')
let ws

function connectWebSocket(sshCredentials) {
  const isHttps = location.protocol === 'https:'
  ws = new WebSocket(
    `${isHttps ? 'wss' : 'ws'}://${location.hostname}:${location.port}/ssh`
  )

  ws.addEventListener('open', (event) => {
    ws.send(JSON.stringify(sshCredentials))
    overlay.style.display = 'none'

    ws.onmessage = (event) => {
      term.write(event.data)
      debounce(() => {
        resize()
      }, 1000)()
    }

    term.onData((e) => {
      ws.send(e)
    })
  })

  ws.addEventListener('error', (event) => {
    showErrorModal('WebSocket 连接错误。请尝试重新连接。', 'error-container')
  })

  ws.addEventListener('close', (event) => {
    showErrorModal(
      'WebSocket 连接已关闭。正在尝试重新连接...',
      'error-container'
    )
    setTimeout(() => {
      connectWebSocket(sshCredentials)
    }, 5000)
  })
}

// 在页面加载时显示弹窗
window.addEventListener('load', () => {
  const storedCredentials = localStorage.getItem('sshCredentials')
  if (storedCredentials) {
    const sshCredentials = JSON.parse(storedCredentials)
    connectWebSocket(sshCredentials)
  } else {
    connectWebSocket({
      ip: '您的ssh的ip',
      port: '您的ssh的端口',
      username: '您的ssh的用户名',
      password: '您的ssh的密码'
    })
  }
  resize()
})

const term = new Terminal({
  cursorStyle: 'underline',
  cursorBlink: true,
  rightClickSelectsWord: true,
  theme: {
    foreground: '#F8F8F8',
    background: '#2D2E2C',
    cursor: 'help',
    lineHeight: 10
  },
  fontFamily: '"Cascadia Code", Menlo, monospace',
  screenKeys: true,
  useStyle: true
})

const fitAddon = new FitAddon()
term.loadAddon(fitAddon)

term.writeln('Welcome to \x1b[1;32mYorlg\x1b[0m.')
term.writeln('This is Web Terminal of Modb;\n')

term.open(terminal)
term.focus()

const resize = () => {
  const dimensions = fitAddon.proposeDimensions()
  if (dimensions?.cols && dimensions?.rows) {
    fitAddon.fit()
    if (ws?.readyState === WebSocket.OPEN) {
      ws.send(
        JSON.stringify({
          action: 'resize',
          cols: dimensions.cols,
          rows: dimensions.rows
        })
      )
    }
  }
}

window.onresize = debounce(() => {
  resize()
}, 1000)

// 获取右上角退出按钮
const closeBtn = document.getElementById('exit')

closeBtn.addEventListener('click', () => {
  ws.close() // 关闭 WebSocket 连接
  // 并且清除本地存储的 SSH 凭据
  localStorage.removeItem('sshCredentials')
  location.reload()
})

// 用于防抖的函数
function debounce(fn, delay) {
  let timer = null
  return function () {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay)
  }
}

function showErrorModal(message, containerId) {
  const container = document.getElementById(containerId)
  if (!container) {
    console.error(`Container with ID ${containerId} not found.`)
    return
  }

  const errorModal = document.createElement('div')
  errorModal.classList.add('error-modal')
  errorModal.innerHTML = `
    <div class="error-modal-content">
      <span class="error-modal-close">&times;</span>
      <p>${message}</p>
    </div>
  `
  container.appendChild(errorModal)

  const closeModal = errorModal.querySelector('.error-modal-close')
  closeModal.addEventListener('click', () => {
    container.removeChild(errorModal)
  })

  // 自动消失
  setTimeout(() => {
    if (container.contains(errorModal)) {
      container.removeChild(errorModal)
    }
  }, 5000) // 5秒后自动消失
}
